<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>用户信息列表</title>
<style type="text/css">
* {
	padding: 0;
	margin: 0
}

body {
	width: 90%;
	font-size: 14px;
	font-family: Microsoft Yahei;
	padding: 40px;
	font-family: 华文楷体
}

table {
	border-collapse: collapse;
	border-spacing: 0;
	width: 100%;
	border: 1px solid #ccc;
}

table th {
	background-color: #f1f1f1;
}

table th, table td {
	border: 1px solid #ccc;
	color: #555;
	padding: 5px 10px;
}

input {
	border: 1px solid #eee;
	padding: 3px 6px;
	color: #666;
}

form {
	height: 50px;
}

.topbar {
	height: 60px;
	padding: 0;
}

.topbar li {
	float: left;
	padding-right: 20px;
	list-style: none;
}

ul {
	list-style: none
}

nav ul  li {
	min-width: 100px;
	min-height: 50px;
	float: left
}

header {
	background-color: #f1f1f1;
	min-height: 70px;
	width: 100%;
	line-height: 70px
}

header ul  li {
	min-width: 100px;
	min-height: 50px;
	float: left;
}

footer ul li {
	min-width: 100px;
	min-height: 50px;
	float: left
}

a {
	text-decoration: none;
}

a:visited {
	color: black
}

aside {
	width: 200px;
	min-height: 500px;
	background-color: #f1f1f1;
	over-flow: auto;
	float: left;
}

section {
	float: left;
	width: 800px;
	min-height: 500px;
}

section  iframe {
	width: 100%;
	height: 600px;
	border: none;
}
.hint_color{
	color:red;
}


</style>

<script type="text/javascript" src="static/js/lanqiao.js"></script>
<script type="text/javascript" src="static/js/auth.js"></script>
<script type="text/javascript"
	src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript"
	src="https://cdn.bootcss.com/vue/2.5.13/vue.min.js"></script>



</head>
<body>
	<h2>基于Vue 使用Servlet完成一个前后端分离版本的增删改查案例</h2>
	<br />
	<h3>客户信息列表</h3>
	<br />


	<div id="app">
		<table border="1">
			<tr>
				<th><input type="checkbox"   v-on:click="selectAll"  v-model='checked' />全选</th>
				<th>编号</th>
				<th>姓名</th>
				<th>密码</th>
				<th>邮箱</th>
				<th>电话</th>
				<th>昵称</th>
				<th></th>
				<th></th>
				<th></th>

			</tr>
			<tr v-for="user  in lists ">
				<td><input type="checkbox"   v-bind:id="user.id"   v-bind:value="user.id"  v-model="selectIds" /></td>
				<td>{{user.id}}</td>
				<td>{{user.username}}</td>
				<td>{{user.password}}</td>
				<td>{{user.email}}</td>
				<td>{{user.telphone}}</td>
				<td>{{user.nickname}}</td>


				<td><a v-bind:href="'info.html?id='+user.id">详情</a></td>
				<td><a v-bind:href="'edit.html?id='+user.id">编辑</a></td>
				<td>删除</td>
			</tr>
		</table>
		<p>{{selectIds}}</p>
		<br/>
		<h3>用户添加</h3>
		<br/>
		<table border="1" style="width:600px">
				  <tr>
				    <th style="width:200px">编号</th>
				    <td >
				    	<input type="text"  value="自动增长"  disabled>
				    </td>
				    <td ></td>
				
				</tr>
				 <tr>
				    <th>用户名</th>
				    <td>
				    	<input type="text" v-model="user.username"  v-on:blur="validate">
				    </td>
				     <td class="hint_color">
				     	{{hint.username}}
				     </td>
				   
				</tr>
				  <tr>
				    <th>密码</th>
				    <td>
				    <input type="text" v-model="user.password" >
				     
				    </td>
				     <td class="hint_color"></td>
				 
				</tr>
				  <tr>
				    <th>邮箱</th>
				    <td>
				     <input type="text" v-model="user.email" >
				   
				    </td>
				     <td class="hint_color"></td>
				
				</tr>
				  <tr>
				    <th>电话</th>
				    <td>
				      <input type="text" v-model="user.telphone" >
				     
				    </td>
				     <td class="hint_color"></td>
				  
				</tr>
				  <tr>
				    <th>昵称</th>
				    <td>
				     <input type="text" v-model="user.nickname" >
				     
				    </td>
				     <td class="hint_color"></td>
				  
				</tr>
				
				
				 <tr>
				    <th></th>
				    <td>
				       <input type="button"  value="提交"  @click="add" />
				     
				    </td>
				     <td></td>
				  
				</tr>
	</table>



	</div>


</body>

<script type="text/javascript">
	//Hint表示提示对象 ，把提示信息封装到hint对象中
	var vue = new Vue({
		el : '#app',
		data : {
			lists : [],
			checked : false,
			selectIds:[],
			user:{},
			hint:{
				username:'',
				email:''
				
			}
			
		},
		methods : {
			init : function() {
				var _self = this;
				//自定义 一个函数 ，用来查询所有的用户信息，返回Json
				$.get("/Tust-lanqiao-demo/user/list", function(data) {
					_self.lists = data;
				}, "json");
			},
			selectAll : function() {
				//全选功能
				if(this.checked){
					this.selectIds=[];
				}else{
					this.selectIds=[];
					var _self=this;
					//遍历Lists数组，向checkbox绑定的数组加入Id
					this.lists.forEach(function(item,index){
						_self.selectIds.push(item.id);
					});
				}
				
				
			},
			add:function() {
				 var _self=this;
				$.post("/Tust-lanqiao-demo/user/add",this.user,function(data){
					alert(data.info);
					window.location.reload();
				},"json"); 
			},
			validate:function(){
				//验证用户名是否已经存在
				 var _self=this;
					$.post("/Tust-lanqiao-demo/user/valid",this.user,function(data){
						_self.hint.username=data.info;
					},"json"); 
			}

		}

	});
	//初始化Vue对象完毕之后，就调用init方法 （一进入页面，就显示数据）
	vue.init();
</script>







</html>